<!-- eslint-disable vue/no-mutating-props -->
<template>
  <el-form ref="form" :model="form" label-width="100px">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="实例名称" prop="dataSourceName">
          <el-input
            v-model="form.dataSourceName"
            placeholder="请输入名称"
            disabled
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="驱动类" prop="driver">
          <el-input v-model="form.driver" disabled placeholder="请输入驱动类" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="IP" prop="ip">
          <el-input v-model="form.ip" disabled placeholder="请输入IP" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="端口" prop="port">
          <el-input v-model="form.port" disabled placeholder="请输入端口" />
        </el-form-item>
      </el-col>

      <el-col
        v-for="item in dict.type.dabase_show"
        :key="item.value"
        :span="12"
      >
        <el-form-item
          v-if="item.value == form.type"
          label="数据库"
          prop="databaseName"
        >
          <el-input
            v-model="form.databaseName"
            disabled
            placeholder="请输入数据库"
          />
        </el-form-item>
      </el-col>
      <el-col
        v-for="item in dict.type.instancename_show"
        :key="item.value"
        :span="12"
      >
        <el-form-item
          v-if="item.value == form.type"
          label="实例名"
          prop="schemaName"
        >
          <el-input
            v-model="form.schemaName"
            disabled
            placeholder="请输入数据库实例名"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用户" prop="uname">
          <el-input v-model="form.uname" disabled placeholder="请输入用户" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="密码" prop="pwd">
          <el-input
            v-model="form.pwd"
            disabled
            type="password"
            placeholder="请输入密码"
            style="width: 270px"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <div class="seniorEl">
      高级配置
      <el-switch v-model="showConf" style="margin-left: 10px" />
    </div>
    <el-row v-if="showConf">
      <el-col :span="12">
        <el-form-item label="区分大小写" prop="caseSensitive">
          <el-radio-group v-model="form.caseSensitive" disabled>
            <el-radio
              v-for="dict in dict.type.database_case_sensitive"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="自动提交" prop="autoCommit">
          <el-radio-group v-model="form.autoCommit" disabled>
            <el-radio
              v-for="dict in dict.type.database_auto_commit"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="连接超时" prop="connectTimeout">
          <el-input
            v-model="form.connectTimeout"
            disabled
            placeholder="请输入连接超时"
            onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="会话超时" prop="socketTimeout">
          <el-input
            v-model="form.socketTimeout"
            disabled
            placeholder="请输入会话超时"
            onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="编码格式" prop="encoding">
          <el-input
            v-model="form.encoding"
            disabled
            placeholder="请输入编码格式"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="Unicode" prop="useUnicode">
          <el-radio-group v-model="form.useUnicode" disabled>
            <el-radio label="true">是</el-radio>
            <el-radio label="false">否</el-radio>
            <el-radio label="null">全不选</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status" disabled>
            <el-radio
              v-for="dict in dict.type.data_status"
              :key="dict.value"
              :label="dict.value"
            >{{ dict.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-form-item label="URL" prop="url">
        <el-input v-model="form.url" disabled placeholder="请输入URL" />
      </el-form-item>
    </el-row>

    <el-row>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          disabled
          type="textarea"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
export default {
  name: 'DatabaseView',
  props: ['form'],
  dicts: [
    'database_case_sensitive',
    'data_status',
    'data_base_type',
    'database_auto_commit',
    'database_datatype',
    'database_datataststatus',
    'dabase_show',
    'instancename_show'
  ],
  data() {
    return {
      showConf: false
    }
  },
  created() {
  }
}
</script>
<style lang="scss" scoped>
.seniorEl {
  margin-left: 3px;
  margin-bottom: 20px;
}
</style>
